Frontend PWA Fon Rejimida Vazifalarni Rejalashtirish: Offlayn Ishni Boshqarish

Progressive Web Apps (PWA'lar) oflayn imkoniyatlarni o'z ichiga olgan holda, mahalliy kabi tajribalarni taqdim etish orqali vebni inqilob qildi. Yaxshi ishlab chiqilgan PWA ning muhim jihati - bu fon rejimida, hatto foydalanuvchi oflayn bo'lganda ham, vazifalarni boshqarish qobiliyatidir. Ushbu blog postida frontend PWA'larda fon rejimida vazifalarni rejalashtirishni amalga oshirish bo'yicha turli xil usullar o'rganiladi, bu esa oflayn ishni ishonchli boshqarish va foydalanuvchi tajribasini yaxshilash imkonini beradi.

Fon Rejimida Vazifalarni Rejalashtirishga Bo'lgan Ehtiyojni Tushunish

Ulangan dunyoda biz ko'pincha internetga ulanishni o'z-o'zidan ravshan deb qabul qilamiz. Biroq, ulanish ishonchsiz, vaqti-vaqti bilan yoki yo'q bo'lishi mumkin, ayniqsa ma'lum geografik joylarda yoki sayohat paytida. PWA'lar foydalanuvchilarga oflayn bo'lganda ham ilova bilan o'zaro aloqada bo'lishga imkon berish orqali ushbu muammoni hal qiladi. Fon rejimida vazifalarni rejalashtirish quyidagilar uchun zarur:

• Ma'lumotlarni Sinxronlash: Foydalanuvchi ulanishni tiklaganda PWA va server o'rtasida ma'lumotlarni sinxronlash. Bu oflayn rejimda to'plangan ma'lumotlarni (masalan, shakl topshirish, rasmlar) yuklash va yangilangan kontentni yuklab olishni o'z ichiga oladi.
• Kechiktirilgan Vazifalar: Analitik ma'lumotlarni yuborish yoki murakkab hisob-kitoblarni amalga oshirish kabi foydalanuvchining zudlik bilan o'zaro aloqasini talab qilmaydigan vazifalarni bajarish.
• Kontentni Oldindan Yuklab Olish: Ishlashni yaxshilash va kontent oflayn rejimda mavjud bo'lishini ta'minlash uchun resurslarni fon rejimida yuklab olish.

Fon Rejimida Vazifalarni Rejalashtirish uchun Asosiy Texnologiyalar

1. Service Worker

Service Worker - PWA oflayn imkoniyatlarining yuragi. U veb-ilova va tarmoq o'rtasida proksi vazifasini bajaradi, tarmoq so'rovlarini to'xtatadi va oflayn rejimda keshlangan javoblarni taqdim etadi. Shuningdek, u quyidagilar orqali fon vazifalarini yoqadi:

• Voqea Tinglovchilari: install, activate, fetch va sync kabi voqealarni tinglash.
• Cache API: Brauzer keshida aktivlarni saqlash va olish.
• Background Sync API: Foydalanuvchi ulanishni tiklaganda bajarilishi kerak bo'lgan vazifalarni rejalashtirish.

2. IndexedDB

IndexedDB - bu mijoz tomonidagi NoSQL ma'lumotlar bazasi bo'lib, PWA'larga tuzilgan ma'lumotlarni oflayn rejimda saqlash imkonini beradi. Bu keyinchalik server bilan sinxronlashtirilishi kerak bo'lgan ma'lumotlarni saqlash uchun idealdir.

3. Background Sync API

Background Sync API Service Workerga brauzer tarmoq ulanishini aniqlaganda bajarilishi kerak bo'lgan vazifalarni ro'yxatdan o'tkazish imkonini beradi. Bu ayniqsa oflayn rejimda yaratilgan yoki o'zgartirilgan ma'lumotlarni sinxronlash uchun foydalidir.

4. Periodic Background Sync API

Periodic Background Sync API, Background Sync API ning kengaytmasi, hatto ilova faol ishlatilmayotgan bo'lsa ham, fon rejimida bajarilishi kerak bo'lgan davriy vazifalarni rejalashtirish imkonini beradi. Bu so'nggi yangiliklar sarlavhalarini olish yoki ob-havo prognozini yangilash kabi vazifalar uchun foydalidir.

5. Background Fetch API

Background Fetch API Service Workerga foydalanuvchi sahifadan uzoqlashsa ham, fon rejimida katta fayllarni yuklab olish imkonini beradi. Bu kontentni oldindan yuklab olish yoki oflayn foydalanish uchun aktivlarni yuklab olish uchun foydalidir.

Fon Rejimida Vazifalarni Rejalashtirishni Amalga Oshirish: Bosqichma-Bosqich Qo'llanma

Bu yerda Background Sync API yordamida PWA da fon rejimida vazifalarni rejalashtirishni amalga oshirish bo'yicha amaliy qo'llanma keltirilgan:

1-qadam: Service Worker ni Ro'yxatdan O'tkazing

Avvalambor, asosiy JavaScript faylingizda Service Worker ni ro'yxatdan o'tkazing:

            
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(function(err) {
      console.log('Service Worker registration failed:', err);
    });
}

            

              
                Copy
              
            
          

2-qadam: Service Worker da Tarmoq So'rovlarini To'xtating

`service-worker.js` faylingizda tarmoq so'rovlarini to'xtating va oflayn rejimda keshlangan javoblarni taqdim eting:

            
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // Not in cache - fetch from network
        return fetch(event.request).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the cache to use it and the app to use it
            // we need to clone it.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
  );
});

            

              
                Copy
              
            
          

3-qadam: IndexedDB da Ma'lumotlarni Oflayn Rejimda Saqlang

Foydalanuvchi oflayn bo'lganda, ma'lumotlarni IndexedDB da saqlang. Misol uchun, shakl topshirishlarini saqlaylik:

            
function saveFormDataOffline(formData) {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('offline-data', 1);

    request.onerror = (event) => {
      reject('Error opening database');
    };

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      const objectStore = db.createObjectStore('submissions', { autoIncrement: true });
      objectStore.createIndex('timestamp', 'timestamp', { unique: false });
    };

    request.onsuccess = (event) => {
      const db = event.target.result;
      const transaction = db.transaction(['submissions'], 'readwrite');
      const objectStore = transaction.objectStore('submissions');
      const submission = {
        data: formData,
        timestamp: Date.now()
      };
      const addRequest = objectStore.add(submission);

      addRequest.onsuccess = () => {
        resolve('Data saved offline');
      };

      addRequest.onerror = () => {
        reject('Error saving data offline');
      };

      transaction.oncomplete = () => {
        db.close();
      };
    };
  });
}

            

              
                Copy
              
            
          

4-qadam: Background Sync Vazifasini Ro'yxatdan O'tkazing

Foydalanuvchi ulanishni tiklaganda ma'lumotlarni sinxronlashtirish uchun fon sinxronlash vazifasini ro'yxatdan o'tkazing:

            
function registerSync() {
  navigator.serviceWorker.ready.then(function(registration) {
    return registration.sync.register('sync-form-data');
  }).then(function() {
    console.log('Background sync registered!');
  }).catch(function(error) {
    console.log('Background sync registration failed: ', error);
  });
}

            

              
                Copy
              
            
          

5-qadam: Service Worker da Sync Voqeasini Tinglang

`service-worker.js` faylingizda `sync` voqeasini tinglang va ma'lumotlarni sinxronlashtiring:

            
self.addEventListener('sync', function(event) {
  if (event.tag === 'sync-form-data') {
    event.waitUntil(syncFormData());
  }
});

function syncFormData() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('offline-data', 1);

    request.onerror = (event) => {
      reject('Error opening database');
    };

    request.onsuccess = (event) => {
      const db = event.target.result;
      const transaction = db.transaction(['submissions'], 'readwrite');
      const objectStore = transaction.objectStore('submissions');
      const getAllRequest = objectStore.getAll();

      getAllRequest.onsuccess = () => {
        const submissions = getAllRequest.result;
        if (submissions.length > 0) {
          // Send data to the server
          Promise.all(submissions.map(submission => sendDataToServer(submission.data)))
            .then(() => {
              // Clear the IndexedDB
              const clearRequest = objectStore.clear();
              clearRequest.onsuccess = () => {
                resolve('Data synchronized and cleared');
              };
              clearRequest.onerror = () => {
                reject('Error clearing IndexedDB');
              };
            })
            .catch(error => {
              reject('Error sending data to server: ' + error);
            });
        } else {
          resolve('No data to synchronize');
        }
      };

      getAllRequest.onerror = () => {
        reject('Error getting data from IndexedDB');
      };

      transaction.oncomplete = () => {
        db.close();
      };
    };
  });
}

function sendDataToServer(data) {
  // Replace with your actual API endpoint
  const apiUrl = '/api/submit-form';

  return fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  }).then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  });
}

            

              
                Copy
              
            
          

Periodic Background Sync API dan Foydalanish

Periodic Background Sync API - bu so'nggi yangiliklarni olish yoki ob-havo prognozini yangilash kabi muntazam ravishda bajarilishi kerak bo'lgan vazifalar uchun foydalidir. Mana uni qanday ishlatish kerak:

1-qadam: Qo'llab-quvvatlashni Tekshiring

Avvalambor, Periodic Background Sync API brauzer tomonidan qo'llab-quvvatlanishini tekshiring:

            
if ('periodicSync' in registration) {
  // Periodic Background Sync API is supported
} else {
  console.log('Periodic Background Sync API is not supported');
}

            

              
                Copy
              
            
          

2-qadam: Ruxsat So'rang

Periodic Background Sync API dan foydalanish uchun foydalanuvchidan ruxsat so'rashingiz kerak:

            
navigator.permissions.query({ name: 'periodic-background-sync' })
  .then((status) => {
    if (status.state === 'granted') {
      // Periodic background sync can be used
    } else {
      console.log('Periodic background sync permission not granted');
    }
  });

            

              
                Copy
              
            
          

3-qadam: Davriy Sinxronlash Vazifasini Ro'yxatdan O'tkazing

Service Worker da davriy sinxronlash vazifasini ro'yxatdan o'tkazing:

            
registration.periodicSync.register('update-news', {
  minInterval: 24 * 60 * 60 * 1000, // 1 day
}).then(() => {
  console.log('Periodic background sync registered for updating news');
}).catch((error) => {
  console.error('Periodic background sync registration failed: ', error);
});

            

              
                Copy
              
            
          

4-qadam: Davriy Sinxronlash Voqeasini Boshqaring

Davriy vazifani bajarish uchun Service Worker da `sync` voqeasini boshqaring:

            
self.addEventListener('sync', (event) => {
  if (event.tag === 'update-news') {
    event.waitUntil(updateNews());
  }
});

function updateNews() {
  // Fetch the latest news from the server
  return fetch('/api/news')
    .then(response => response.json())
    .then(news => {
      // Store the news in IndexedDB
      return storeNewsInIndexedDB(news);
    })
    .catch(error => {
      console.error('Error updating news: ', error);
    });
}

            

              
                Copy
              
            
          

Xatolarni Boshqarish va Eng Yaxshi Amaliyotlar

Fon rejimida vazifalarni rejalashtirish xatolarni boshqarish va eng yaxshi amaliyotlarni diqqat bilan ko'rib chiqishni talab qiladi:

• Qayta Urinish Mexanizmlari: Muvaffaqiyatsiz vazifalar uchun eksponensial chekinish bilan qayta urinish mexanizmlarini amalga oshiring.
• Idempotentlik: Vazifalar idempotent ekanligiga ishonch hosil qiling, ya'ni ularni bir necha marta bajarish bir marta bajarish bilan bir xil ta'sirga ega. Bu qayta urinishlar holatida ma'lumotlarning buzilishini oldini olish uchun muhimdir.
• Batareyani Optimallashtirish: Fon vazifalarini rejalashtirishda batareya sarfini hisobga oling. Batareyani tezda tugatishi mumkin bo'lgan tez-tez vazifalardan saqlaning.
• Foydalanuvchi Bildirishnomasi: Ayniqsa, ma'lumotlarni sinxronlash bilan bog'liq bo'lsa, fon vazifalarining holati haqida foydalanuvchiga fikr bildiring.
• Xavfsizlikni Ko'rib Chiqish: Maxfiy ma'lumotlarni IndexedDB da xavfsiz saqlang va saytlararo skript (XSS) zaifliklaridan himoya qiling.
• Sinovdan O'tkazish: Fon rejimida vazifalarni rejalashtirishni turli xil tarmoq sharoitlarida va brauzer muhitlarida sinchkovlik bilan sinovdan o'tkazing.

Internatsionallashtirish va Lokalizatsiya Masalalari

Global auditoriya uchun PWA'larni ishlab chiqishda internatsionallashtirish (i18n) va lokalizatsiyani (l10n) ko'rib chiqish muhimdir:

• Tilni Qo'llab-quvvatlash: Bir nechta tillarni qo'llab-quvvatlang va foydalanuvchilarga o'zlarining afzal ko'rgan tilini tanlashga ruxsat bering.
• Sana va Vaqtni Formatlash: Turli mintaqalar uchun tegishli sana va vaqt formatlaridan foydalaning.
• Raqamni Formatlash: O'nlik ajratuvchi va ming ajratuvchini o'z ichiga olgan holda, turli mintaqalar uchun tegishli raqam formatlaridan foydalaning.
• Valyutani Formatlash: Turli mintaqalar uchun valyuta qiymatlarini to'g'ri belgilar va formatlash bilan ko'rsating.
• Tarjima: Barcha foydalanuvchi bilan aloqa qiluvchi matnlarni qo'llab-quvvatlanadigan tillarga tarjima qiling.
• O'ngdan Chapga (RTL) Qo'llab-quvvatlash: Arab va ibroniy kabi RTL tillarini qo'llab-quvvatlang.

i18next va Moment.js kabi kutubxonalar PWA'da i18n va l10n ni soddalashtirishga yordam beradi.

Fon Rejimida Vazifalarni Rejalashtirishdan Foydalanadigan Haqiqiy Dunyo PWA'larining Misollari

Bir nechta haqiqiy dunyo PWA'lari uzluksiz oflayn tajribalarni taqdim etish uchun fon rejimida vazifalarni rejalashtirishdan foydalanadi:

• Google Docs: Foydalanuvchilarga oflayn rejimda hujjatlarni yaratish va tahrirlash, ulanish tiklanganda o'zgarishlarni sinxronlashtirish imkonini beradi.
• Twitter Lite: Foydalanuvchilarga oflayn rejimda tvitlarni yozish va yuborish, ularni onlayn rejimga qaytganda yuklash imkonini beradi.
• Starbucks: Foydalanuvchilarga oflayn rejimda buyurtma berish imkonini beradi, ular ulanish mavjud bo'lganda yuboriladi.
• AliExpress: Mahsulotlarni ko'rish va ularni oflayn rejimda savatga qo'shish imkonini beradi, qayta ulanishda sinxronlash bilan.

Xulosa

Fon rejimida vazifalarni rejalashtirish zamonaviy PWA'larning muhim tarkibiy qismidir, u oflayn ishni ishonchli boshqarish va foydalanuvchi tajribasini yaxshilash imkonini beradi. Service Workers, IndexedDB va Background Sync API kabi texnologiyalardan foydalanib, ishlab chiquvchilar tarmoq ulanishi bo'lmagan taqdirda ham uzluksiz va ishonchli funksionallikni ta'minlaydigan PWA'larni yaratishi mumkin. PWA'lar rivojlanishda davom etar ekan, fon rejimida vazifalarni rejalashtirishni o'zlashtirish haqiqatan ham jozibali va global miqyosda qulay veb-ilovalarni yaratish uchun zarur bo'ladi. Turli xil global auditoriya uchun sayqallangan va foydalanuvchilarga qulay tajriba yaratish uchun xatolarni boshqarish, batareyani optimallashtirish va foydalanuvchi fikrlariga ustuvor ahamiyat berishni unutmang.